<template>
  <div>
    <!-- 查询区域 -->
    <a-card class="card-header">
      <a-form-model ref="modelForm" :model="model">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="materialPrepareNum"
              label="备料单号"
            >
              <a-input
                disabled
                placeholder="请输入备料单号"
                v-model.trim="model.materialPrepareNum"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="worksheetNum"
              label="加工单号"
            >
              <a-input
                disabled
                placeholder="请输入加工单号"
                v-model.trim="model.worksheetNum"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="worksheetQuantity"
              label="加工单数量"
            >
              <a-input-number
                disabled
                style="width:100%"
                placeholder="请输入加工单数量"
                v-model.trim="model.worksheetQuantity"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <!-- 表格区域 -->
    <a-card class="card-content">
      <div class="requiredNews">出库明细</div>
      <br />
      <a-table
        :columns="goodColumns"
        :data-source="tableData"
        :loading="loading"
        :pagination="false"
        :rowKey="(record, index) => record.id"
      >
        <template slot="action" slot-scope="text, record">
          <div>
            <a @click="handleWorkResume(record)">{{
              record.receiveMaterialUsername == null ? "编辑" : "详情"
            }}</a>
          </div>
        </template>
      </a-table>
    </a-card>
    <GoodResume ref="GoodResume"></GoodResume>
  </div>
</template>

<script>
import { goodColumns } from "./components/tableConfig";
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import GoodResume from "./components/goodResume.vue";

export default {
  mixins: [tableMinxins],
  components: { GoodResume },
  data() {
    return {
      goodColumns,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
    };
  },
  mounted() {
    if (this.$route.query) {
      let query = this.$route.query;
      this.getDetail(query.materialPrepareNum);
      this.$set(this.model, "materialPrepareNum", query.materialPrepareNum);
      this.$set(this.model, "worksheetNum", query.worksheetNum);
      this.$set(this.model, "worksheetQuantity", query.worksheetQuantity);
    }
  },
  methods: {
    // 获取出库履历详情
    async getDetail(materialPrepareNum) {
      const params = {
        materialPrepareNum,
      };
      const res = await api.OutStoreRecord(params);
      this.tableData = res.data;
    },
    // 商品明细
    handleWorkResume(record) {
      this.$router.push({
        path: "/picking/wareOrder",
        query: {
          id: record.pickListId,
          outStoreNum: record.outStoreNum,
          WareResume: "WareResume",
          receiveMaterialUsername:
            record.receiveMaterialUsername == null
              ? ""
              : record.receiveMaterialUsername,
        },
      });
    },
    handleReceiving(record) {
      this.$router.push({ path: "/ware/receiving" });
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.ant-form-item {
  margin: 10px 0;
}
.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;
  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
</style>
